<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <transition name="fade-right">
          <XtxBreadItem :to="`/category?id=${$store.state.breadList.id}`">{{
            $store.state.breadList.name
          }}</XtxBreadItem>
        </transition>
        <transition name="fade-right">
          <XtxBreadItem :key="SubObject.id">{{ SubObject.name }} </XtxBreadItem>
        </transition>
      </XtxBread>
      <!-- 商品的分类区 -->
      <sub-filter-shop
        @changeBarand="changeBarand"
        @changeProp="changeProp"
      ></sub-filter-shop>

      <!-- 商品的排序 -->
      <div class="goods-list">
        <sub-sort @storChange="storChange"></sub-sort>
        <!-- 列表 -->
        <ul>
          <li v-for="i in catgoryObj" :key="i">
            <goods-item :item="i" />
          </li>
        </ul>
        <!-- 无限加载 -->
        <xtx-infinite-loading
          :loading="loading"
          :finished="finished"
          @infinite="getData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { GetSub } from "@/api"; // 分类数据
import { findSubCategoryGoods } from "@/api/category.js";
import { useRoute } from "vue-router";
import { ref, computed, watch } from "vue";
import SubFilterShop from "./components/subFilterShop.vue";
import SubSort from "./components/subSort.vue";
import GoodsItem from "./components/goodsItem.vue";

export default {
  name: "SubCategory",
  components: { SubFilterShop, SubSort, GoodsItem },
  setup(props, { emit }) {
    let route = useRoute();
    let SubObject = ref({}); // id 对应的数据
    let catgoryObj = ref([]); // 下拉加载的数据
    let routerId = computed(() => route.query.id);
    // 却出1级面包
    let flag = ref(false); // 数据加载判断二层
    let checkd = ref(true); // 复选框选中状态

    // 加载中
    const loading = ref(false);
    // 是否加载完毕
    const finished = ref(false);

    // 商品需要传递的参数
    var reqParmas = {
      page: 1,
      pageSize: 20,
      categoryId: null,
    };

    function getData() {
      // 发请求前吧加载中打开
      loading.value = true;
      // 获取 categoryId
      reqParmas.categoryId = route.query.id;
      // 调用接口
      findSubCategoryGoods(reqParmas).then((res) => {
        if (res.result.items.length) {
          catgoryObj.value.push(...res.result.items);
          // 加载完了吧 page 加++ 展示下一页数据
          reqParmas.page++;
          // push 完结束加载
          loading.value = false;
        } else {
          finished.value = true;
          // 加载完成 显示那个没有数据了
        }
        loading.value = false;
        console.log(res);
      });
    }

    // 更改2级分类的时候 需要重新加载数据
    watch(
      () => route.query.id,
      (data) => {
        if (data && "/category/sub" == route.path) {
          console.log(route.path);
          // 一上来让 没有数据加载了关闭
          finished.value = false;
          // 让数据清空，加载更多数据顶上来，进入可视区，区加载数据
          catgoryObj.value = [];
          // 初始化一下页吗
          reqParmas = {
            page: 1,
            pageSize: 20,
          };

          // 面包屑的最后一个数据
          GetSub(route.query.id).then((res) => {
            console.log(res);
            SubObject.value = res.result
          });
        }
      },
      { deep: true,immediate:true }
    );

    // 排序事件
    const storChange = (item) => {
      // 一上来让 没有数据加载了关闭
      finished.value = false;
      // 合并请求参数，保留之前参数
      reqParmas = { ...reqParmas, ...item };
      // 默认是第一页数据
      reqParmas.page = 1;
      // 让数据清空，加载更多数据顶上来，进入可视区，区加载数据
      catgoryObj.value = [];
    };

    function changeBarand(item) {
      // 一上来让 没有数据加载了关闭
      finished.value = false;
      // 合并请求参数，保留之前参数
      reqParmas = { ...reqParmas, ...item };
      // 默认是第一页数据
      reqParmas.page = 1;
      // 让数据清空，加载更多数据顶上来，进入可视区，区加载数据
      catgoryObj.value = [];
    }
    function changeProp(item) {
      // 一上来让 没有数据加载了关闭
      finished.value = false;
      // 合并请求参数，保留之前参数
      reqParmas = { ...reqParmas, ...item };
      // 默认是第一页数据
      reqParmas.page = 1;
      // 让数据清空，加载更多数据顶上来，进入可视区，区加载数据
      catgoryObj.value = [];
    }

    return {
      SubObject,
      catgoryObj,
      flag,
      checkd,
      getData,
      finished,
      loading,
      storChange,
      changeProp,
      changeBarand,
    };
  },
};
</script>
<style scoped lang="scss">
// 排序列表数据
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}

// 动画
.fade-right-enter-to,
.fade-right-leave-from {
  opacity: 1;
  transform: none;
}
.fade-right-enter-active,
.fade-right-leave-active {
  transition: all 1s;
}
.fade-right-enter-from,
.fade-right-leave-to {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
}
</style>
